<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>修改房源信息</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="${request.contextPath}/favicon.ico">
    <link href="${request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${request.contextPath}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${request.contextPath}/css/animate.css" rel="stylesheet">
    <link href="${request.contextPath}/css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap-fileinput/css/fileinput.min.css">
    <link href="${request.contextPath}/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <style>
        .ibox-border {
            border: 1px solid #39aef5;
        }
        .ibox-border > .ibox-content {
            padding: 5px;
        }
        .form-control:focus,
        .single-line:focus {
            border-color: #0e9aef !important;
        }
        .checkbox-inline {
            line-height: 5px;
        }
        .list-group {
            margin-bottom: 0;
            margin-top: -5px;
        }
        .list-group > .list-group-item {
            border: none;
            padding: 8px 0;
            margin-left: 13px;
            margin-right: 13px;
            border-bottom: 1px dashed #b4afaf;
            margin-bottom: 0;
        }
        .list-group > .list-group-item:nth-last-child(1) {
            border-bottom: none;
        }
        .teacms-tags-list-group {
            list-style: none;
            padding-left: 0;
        }
        .teacms-tags-list-group li {
            display: inline-block;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            padding: 3px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">

    <div class="ibox float-e-margins ibox-blue">
        <div class="ibox-title">
            <h5>修改房源信息</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <form id="addForm" autocomplete="off">
            <input type="hidden" name="id" value="${product.id!}">
            <div class="col-md-9" style="padding: 0">

                <div class="form-group">
                    <label class="form-inline">房源信息标题</label>
                    <input class="form-control" type="text" name="productName" maxlength="100" value="${product.productName!}" placeholder="请输入房源信息标题">
                </div>

                <div class="form-group">
                    <label class="form-inline">房源编号</label>
                    <input class="form-control" type="text" readonly value="${product.productCode!}" placeholder="系统生成">
                </div>

                <div class="form-group">
                    <label class="form-inline">联系QQ号</label>
                    <input class="form-control" name="qq"  maxlength="14" value="${product.qq!}"  placeholder="联系QQ号">
                </div>

                <div class="form-group">
                    <label class="form-inline">房屋价格</label>
                    <div class="input-group">
                    <input class="form-control" type="number" name="regCapital" maxlength="10" value="${product.regCapital!}" placeholder="请输入房屋价格">
                        <span class="input-group-addon">元</span>
                    </div>
                </div>

                <div class="form-group" id="data_3">
                    <label class="form-inline">房屋年限</label>
                    <input class="form-control" type="text" name="regDate" maxlength="10" value="${product.regDate!}" placeholder="请输入房屋年限">
                </div>

                <div class="form-group">
                    <label class="form-inline">房屋面积</label>
                    <input class="form-control" type="text" name="operatingPeriod" maxlength="200" value="${product.operatingPeriod!}" placeholder="请输入房屋面积">
                </div>

                <div class="form-group">
                    <label class="form-inline">小区名称</label>
                    <input class="form-control" type="text" name="operatingScope" maxlength="200" value="${product.operatingScope!}" placeholder="请输入小区名称">
                </div>

                <div class="form-group">
                    <label class="form-inline">房屋优势</label>
                    <textarea class="form-control" name="advantage" maxlength="200" placeholder="请输入房屋优势">${product.advantage!}</textarea>
                </div>

                <div>
                    <label class="form-inline">房屋描述</label>
                    <input id="productContent" type="hidden" name="productContent">
                    <div id="editor">${product.productContent!}</div>
                </div>

                <div class="form-group">
                    <label class="form-inline">房屋图片</label>
                    <input id="productImg" type="hidden" name="productImg" value="${product.productImg!}">
                    <div class="file-loading">
                        <input id="fileUpload" type="file" name="file" multiple>
                    </div>
                </div>

            </div>

            <div class="col-md-3 pr">
                <div class="ibox float-e-margins ibox-blue ibox-border">
                    <div class="ibox-title">
                        房屋类型
                    </div>
                    <div class="ibox-content">
                        <div class="form-group">
                            <select class="form-control" name="companyId">
                            <#list companies as item>
                                <option value="${item.id}">${item.companyType}</option>
                            </#list>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="ibox float-e-margins ibox-blue ibox-border">
                    <div class="ibox-title">
                        房屋地址
                    </div>
                    <div class="ibox-content">
                        <div class="form-group">
                            <select class="form-control" name="regAddressId">
                                <#list regAddresses as item>
                                <option value="${item.id}">${item.city}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary btn-block">提交</button>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>

</div>


<!-- 全局js -->
<script src="${request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${request.contextPath}/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="${request.contextPath}/js/content.js?v=1.0.0"></script>
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script src="${request.contextPath}/plugins/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="${request.contextPath}/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
<!-- Data picker -->
<script src="${request.contextPath}/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script>
    $(function () {
        var E = window.wangEditor
        var editor = new E('#editor');
        editor.customConfig.uploadImgServer = '/admin/uploadwe';

        editor.customConfig.uploadFileName = 'file';

        editor.customConfig.uploadImgHeaders = {
            'enctype' : 'multipart/form-data'
        }

        editor.customConfig.zIndex = 100;
        // 或者 var editor = new E( document.getElementById('#editor') )
        editor.create();

        $("#data_3 input[name='regDate']").datepicker({
            startView: 2,
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true
        });

        // select选中
        $("select[name='companyId'] option[value='${product.companyId!}']").attr("selected", true);
        $("select[name='regAddressId'] option[value='${product.regAddressId!}']").attr("selected", true);


/*        $("#fileUpload").fileinput({
            language: "zh",
            uploadUrl: '/admin/upload2',
            browseClass: "btn btn-success",
            browseLabel: "上传预览图片",
            browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
            allowedFileExtensions: ['jpg', 'gif', 'png'],
            showUpload: true,
            dropZoneEnabled: true,
            showPreview: true,
            minFileCount: 1,
            maxFileCount: 4,
        }).on('fileuploaded', function(event, data, previewId, index) {
            console.log(event)
            console.log(data)
            console.log(previewId)
            console.log(index)
        }).on('filesuccessremove', function(event, id, index) {//点击删除后立即执行
            console.log('id = ' + id + ', index = ' + index);
            return false;
            $('#fileId').fileinput('refresh');//文件框刷新操作
        });*/

        function initFileInput(domId, uploadUrl) {
            var control = $('#' + domId);
            control.fileinput({
                language: "zh",
                uploadUrl: uploadUrl,
                browseClass: "btn btn-success",
                browseLabel: "选择产品预览图片",
                browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
                allowedFileExtensions: ['jpg', 'gif', 'png'],
                showUpload: true,
                dropZoneEnabled: false,
                showPreview: true,
                minFileCount: 1,
                maxFileCount: 4,
                validateInitialCount:true,
                initialPreviewAsData: true,
                initialPreview: [
                <#list product.productImg?split("|") as productImg>
                    <#if productImg!="">
                        "/${productImg}",
                    </#if>
                </#list>
                ],
                fileActionSettings : {
                    showRemove: false,
                    showZoom : true,
                    showUpload : false
                },
            });
            $(".kv-file-remove").remove();
        }

        initFileInput("fileUpload", "/admin/upload2");
        var imagePath = [];
        $("#fileUpload").on("fileuploaded", function(event, data, previewId, index) {
            if (data.response.status) {
                imagePath.push(data.response.filePath);
            } else {
                parent.layer.msg(data.response.msg, {time: 1500, icon:5});
            }
        });

        $("#addForm").submit(function (e) {
            e.preventDefault();
            // 产品图片
            var productImg = "";
            for (var item in imagePath) {
                productImg+=imagePath[item]+"|";
            }
            $("#productImg").val(productImg);

            var productName = $("input[name='productName']").val();
            if (productName == null || productName == "") {
                parent.layer.msg("请输入房屋信息标题", {time: 1500, icon:5});
                return;
            }

            var regCapital = $("input[name='regCapital']").val();
            if (regCapital == null || regCapital == "") {
                parent.layer.msg("请输入房屋价格", {time: 1500, icon:5});
                return;
            }

            var regDate = $("input[name='regDate']").val();
            if (regDate == null || regDate == "") {
                parent.layer.msg("请输入房屋年限", {time: 1500, icon:5});
                return;
            }

            var operatingPeriod = $("input[name='operatingPeriod']").val();
            if (operatingPeriod == null || operatingPeriod == "") {
                parent.layer.msg("请输入房屋面积", {time: 1500, icon:5});
                return;
            }

            var operatingScope = $("input[name='operatingScope']").val();
            if (operatingScope == null || operatingScope == "") {
                parent.layer.msg("请输入小区名称", {time: 1500, icon:5});
                return;
            }

            var advantage = $("textarea[name='advantage']").val();
            if (advantage == null || advantage == "") {
                parent.layer.msg("请输入房屋优势", {time: 1500, icon:5});
                return;
            }

            /*var productImg = $("input[name='productImg']").val();
            if (productImg == null || productImg == "") {
                parent.layer.msg("请上传房屋图片", {time: 1500, icon:5});
                return;
            }*/

            // 产品描述
            $("#productContent").val(editor.txt.html());

            $.ajax({
                url: "/admin/product/updateProduct",
                data:  $("#addForm").serialize(),
                type: "POST",
                dataType: 'json',
                success: function(data){
                    if (data.success) {
                        parent.layer.msg(data.msg, {icon: 1});
                        window.location.reload();
                    } else {
                        parent.layer.msg(data.msg, {time: 1500, icon:5});
                    }
                }
            });
        });

/*        var List = new Array();//定义一个全局变量去接受文件名和id
        $("#fileUpload").on("fileuploaded", function (event, data, previewId, index) {
            var data = data.response.path;  //文件上传成功返回的文件名，可返回自定义文件名
            List.push({ FileName: data, KeyID: previewId })
            console.log(List);
        });*/

/*        $("#fileUpload").on("filesuccessremove", function (event, id, index) {
            /!*for (var i = 0; i < List.length; i++) {
                if (List[i].KeyID== data) {
                    delete List[i];
                }
            }*!/
            console.log('id = ' + id + ', index = ' + index);
            alert(1)
        });*/

/*        $("#fileUpload").on('filepreremove', function(event, id, index) {       //只是你删除重新选择的图片才会触发，而删除原图片不会触发。
            console.log('id = ' + id + ', index = ' + index);
            console.log(List);
            alert(1)
        })*/

        /*$("#fileUpload").on('fileuploaded', function(event, data, previewId, index) {
            console.log(event)
            console.log(data)
            console.log(previewId)
            console.log(index)
           /!* $("#fileUpload").fileinput('refresh',{
                uploadUrl : data.response.path
            });*!/
        }).on('filesuccessremove', function(event, id, index) {//点击删除后立即执行
            console.log('id = ' + id + ', index = ' + index);
            return false;
            $('#fileId').fileinput('refresh');//文件框刷新操作
        }).on('filepreupload', function(event, data, previewId, index) {

            console.log(1)
        });*/

    })
</script>
</body>
</html>
